<#include "/common/defaultEngine.html"/>
<@pageTheme mark="${config.optimize()?string('true', 'false')}">
<@header title="新增字典" bodyClass="white-bg"  libs=["bootstrapSelect","colorpicker"]/>
<div class="wrapper wrapper-content ibox-content">
<@f.form id="form-dict-add" class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-3 control-label "><span style="color: red; ">*</span>字典键值：</label>
        <div class="col-sm-8">
            <@f.input name="dictValue" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label "><span style="color: red; ">*</span>字典标签：</label>
        <div class="col-sm-8">
            <@f.input name="dictLabel" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">字典类型：</label>
        <div class="col-sm-8">
            <@f.input name="dictType" value="${dictType}" readonly=true required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>系统内置：</label>
        <div class="col-sm-8">
            <@f.radio name="isSys" dictType="sys_yes_no"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">CSS类名：</label>
        <div class="col-sm-8">
            <@f.input name="cssClass"  helpTip="如:class=\"red\", 请填写:red"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">CSS样式：</label>
        <div class="col-sm-8">
            <@f.input name="cssStyle" butClass="fa fa-square" helpTip="如：style=\"color:red\", 请填写：color:red"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>字典排序：</label>
        <div class="col-sm-8">
            <@f.input name="dictSort" required=true/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><@ctx.i18n text = "回显样式"/>：
<#--            <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="<@ctx.i18n text = "回显样式"/>"-->
<#--               data-content="table表格字典列显示样式属性">-->
<#--                <i class="fa fa-question-circle-o" style="color: orange"></i></a>-->
            <a tabindex="0" role="button" data-toggle="popover" data-trigger="focus" title="<@ctx.i18n text = "回显样式"/>"
               data-content="table表格字典列显示样式属性">
                <i class="fa fa-question-circle-o" style="color: orange"></i></a>
        </label>
        <div class="col-sm-8">
            <select name="listClass" class="form-control">
                <option value="">---请选择---</option>
                <option value="default">默认--default</option>
                <option value="primary">主要--primary</option>
                <option value="success">成功--success</option>
                <option value="info">   信息--info</option>
                <option value="warning">警告--warning</option>
                <option value="danger"> 危险--danger</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>系统默认：</label>
        <div class="col-sm-8">
            <@f.radio name="isDefault" dictType="sys_yes_no"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label"><span style="color: red; ">*</span>状态：</label>
        <div class="col-sm-8">
            <@f.radio name="status"  dictType="sys_normal_disable"/>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-3 control-label">备注：</label>
        <div class="col-sm-8">
            <@f.textarea name="remark" rows="3"/>
        </div>
    </div>
</@f.form>
</div>
<@footer>
<script>
    var prefix = baseURL + "sys/dict/data";

    /*
	 * 颜色拾取
	 */
	$('#cssStyle').next('.input-group-addon').colorpicker().on('hidePicker',function(event){
		var val = $('#cssStyle').val();
		if(val.indexOf("#") > 0){
			var css = val.substr(0,val.indexOf("#")) + event.color.toHex() + val.substring(val.indexOf("#") + 7);
			$('#cssStyle').val(css);
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',css);
		}else if(val.length > 0){
			$('#cssStyle').val(val+";color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',val+";color:"+ event.color.toHex());
		}else{
			$('#cssStyle').val("color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',"color:"+ event.color.toHex());
		}
	})
   .on('changeColor',function(event){
		var val = $('#cssStyle').val();
		if(val.indexOf("#") > 0){
			var css = val.substr(0,val.indexOf("#")) + event.color.toHex() + val.substring(val.indexOf("#") + 7);
			$('#cssStyle').val(css);
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',css);
		}else if(val.length > 0){
			$('#cssStyle').val(val+";color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',val+";color:"+ event.color.toHex());
		}else{
			$('#cssStyle').val("color:"+ event.color.toHex());
			$('#cssStyle').next('.input-group-addon').children('i').attr('style',"color:"+ event.color.toHex());
		}
	});
    
    $("#form-dict-add").validate({
        rules:{
            dictSort:{
                digits:true
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if (opt.validate.form()) {
            opt.operate.save(prefix + "/add", $('#form-dict-add').serialize());
        }
    }
</script>
</@footer>
</@pageTheme>